<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>医疗展示</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />	
	    <link rel="stylesheet" href="css/animate.min.css"/>		
        <link rel="stylesheet" href="css/style.css" />
		<style>
			.carousel-indicators li{
				width: 40px;
				height: 4px;
				background: #ccc;
			}
			
			.carousel-indicators li.active{
				width: 40px;
				height: 10px;
				background: url(img/switch.svg) no-repeat;
			}
			
			.container{
				border:3px solid #333;
				padding-bottom: 30px;
			}
			
		</style>
	</head>

	<body>
		<!-- 服务团队 轮播 -->
		<div class="container">
			<div class="module_title">
				<h3>途欢优质的医疗服务团队</h3>
				<p class="line"></p>
			</div>
			<div class="switch_box switch_box_pc pc-none">
				<div class="row switch box_center">
					<div class="col-sm-8">
						<!--轮播图-->
						<div id="carousel-example-generic" 
						class="carousel slide" data-ride="carousel">
							<!-- Indicators -->
							<ol class="carousel-indicators">
								<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
								<li data-target="#carousel-example-generic" data-slide-to="1"></li>
								<li data-target="#carousel-example-generic" data-slide-to="2"></li>
								<li data-target="#carousel-example-generic" data-slide-to="3"></li>
							</ol>

							<!-- Wrapper for slides -->
							<div class="carousel-inner" role="listbox">
								<div class="item active">
									<img src="img/img1.jpg" alt="...">
								</div>
								<div class="item">
									<img src="img/img2.jpg" alt="...">

								</div>
								<div class="item">
									<img src="img/img3.jpg" alt="...">

								</div>
								<div class="item">
									<img src="img/img4.jpg" alt="...">

								</div>

							</div>

							<!-- Controls -->
						<!-- 	<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
								<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
								<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a> -->
						</div>
					</div>
					<!--右侧宣传栏 -->
					<div class="describe_box pc_describe col-sm-4">
						<div class="describe_module d-opacity">
							<span class="describe_img"><img src="./img/health-ico.png" alt=""></span>
							<h3>个人专属健康顾问</h3>
							<p>您与医生间的纽带工作者，拥有多年临床及健康管理工作经验，令您与医生的沟通更有质量，帮助您获得更精准的医疗服务</p>
						</div>
						<div class="describe_module ">
							<span class="describe_img">
								<img src="./img/person-ico.png" alt="">
							</span>
							<h3>医疗协调专员</h3>
							<p>您与家人的医疗服务协调顾问，拥有多年临床工作背景和分诊经验，给予您和家人必要的就医指导，帮助您选择适需的科室就医、获得专科医生线上预诊服务，或为您连接您所需的医疗服务</p>
						</div>
						<div class="describe_module ">
							<span class="describe_img">
								<img src="./img/home-ico.png" alt="">
							</span>
							<h3>途欢家庭医生</h3>
							<p>您与家人的健康守门人。解决您与家庭日常大多数的医疗需求及慢性疾病稳定期的治疗、随访与管理。在途欢健康管理平台与健康顾问支持下，协助您完成更精准，更有价值的诊疗</p>
						</div>
						<div class="describe_module ">
							<span class="describe_img">
								<img src="./img/th-ico.png" alt="">
							</span>
							<h3>途欢大夫</h3>
							<p>如您与家人患有慢性疾病，定期为您连接三甲医院专科医生，并评估指导您的诊疗方案。当家庭发生临床医疗需求，将为您推荐并连接最适宜的医生与专家，确保获得更优的医疗解决方案</p>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>

</html>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>
	 $("#carousel-example-generic").on("slide.bs.carousel",function(){
		 //轮播刚开始
		 //当前的文字渐渐消失
		 $(".pc_describe .describe_module")
		 .addClass("animated fadeOutUp").removeClass("fadeInUp");
	 })
	 
	 $("#carousel-example-generic").on("slid.bs.carousel",function(){
		 //轮播完成
		 //后一个文字渐渐出现
		 $(".carousel-inner .item").each(function(index,element){
			 if($(this).hasClass("active")){
				 
				 $(".pc_describe .describe_module")
				 .eq(index).addClass("d-opacity")
				 .siblings().removeClass("d-opacity")
			 }
			
		 })
		 $(".pc_describe .describe_module")
		 .addClass("animated fadeInUp").removeClass("fadeInUp")
		 
	 })
	

</script>
